<template>
    <ManageCard ref="manageCard" :numberOfEntries="bodyData.totalElements" @fulsh="getBodyData"
        @currentChange="currentChange" @clickOfAddBtn="clickOfAddBtn" :page-size="requestParam.pageSize"
        :page-number="requestParam.pageNumber">
        <el-table cell-class-name="cell-class" max-height="calc(100% - 20px)" :data="bodyData.content" style="width: 100%;">
            <!-- 序号 -->
            <el-table-column type="index" width="60px"></el-table-column>
            <!-- 商品id -->
            <el-table-column label="商品id" width="200px">
                <template #header>
                    <div class="item-title">商品ID</div>
                    <div><el-input v-model="requestParam.data.and.eq[0].id" :placeholder="store.appFront.search" size="mini"
                            clearable @keyup.enter="getBodyData"></el-input></div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">{{ scope.row.id }}</div>
                </template>
            </el-table-column>

            <!-- 商品编码 -->
            <el-table-column 
            v-if="typeCodeSelect==null||typeCodeSelect==''"
            label="商品分类" width="200px">
                <template #header>
                    <div class="item-title">商品分类</div>
                    <div>
                    <el-select v-model="requestParam.data.and.eq[0].typeCode" placeholder="请选择商品分类" size="mini" clearable
                        @change="getBodyData"
                        >

                        <el-option v-for="(item, index) in goodsTypeList" :key="index" :label="item.name"
                            :value="item.code"></el-option>
                    </el-select>

                    </div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">{{ 
                        
                        goodsTypeMap[scope.row.typeCode]
                         }}</div>
                </template>
            </el-table-column>

            <!-- 商品名称 -->
            <el-table-column label="商品名称" width="200px">
                <template #header>
                    <div class="item-title">商品名称</div>
                    <div><el-input v-model="requestParam.data.and.vague[0].name" :placeholder="store.appFront.search"
                            size="mini" clearable @keyup.enter="getBodyData"></el-input></div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">{{ scope.row.name }}</div>
                </template>
            </el-table-column>

            <!-- 商品图片 -->
            <el-table-column label="商品图片" width="300px">
                <template #header>
                    <div class="item-title">商品图片</div>
                    <div><el-input v-model="requestParam.data.and.eq[0].id" :placeholder="store.appFront.search" size="mini"
                            clearable @keyup.enter="getBodyData"></el-input></div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">
                        <!-- :preview-src-list="imageListToSrcList(scope.row.imageList)" -->
                        <view v-for="(item, index) in 
                        JSON.parse( scope.row.bodyFileListStr)" :key="index">
                            <el-image :src="$kt.file.visit(item.fileId)" :z-index="999"
                                :preview-src-list="bodyFileListToImgList(scope.row.bodyFileListStr)" :preview-teleported="true"
                                :initial-index="1" fit="cover" style="width: 120px; height: 120px" />
                        </view>
                    </div>
                </template>
            </el-table-column>

            <!-- 创建时间 -->
            <el-table-column width="300px">
                <template #header>
                    <div class="item-title">{{ store.appFront.createTime }}</div>
                    <!-- 时间选择器 -->
                    <div style="width: 100%;text-align: center;">
                        <!-- 开始时间 -->
                        <el-date-picker style="width: 100px;" v-model="requestParam2.createStart" type="datetime"
                            size="mini" :placeholder="store.appFront.startTime" @change="getBodyData">
                        </el-date-picker>
                        <!-- 结束时间 -->
                        <el-date-picker style="width: 100px;" v-model="requestParam2.createEnd" type="datetime" size="mini"
                            :placeholder="store.appFront.endTime" @change="getBodyData">
                        </el-date-picker>

                    </div>
                </template>
                <template #default="scope">
                    <div style="text-align: center;">{{ $kt.date.gmt2Local(scope.row.gmtCreate, "yyyy-MM-dd HH:mm:ss")
                    }}</div>
                </template>
            </el-table-column>



            <!-- 操作，固定位置 -->
            <el-table-column fixed="right" :width="'125px'">
                <template #default="scope">
                    <el-button type="text" ref="editButton" size="small" @click="dialogOfSaveInTableCard.open(scope.row)">
                        <el-icon :size="15">
                            <Edit />
                        </el-icon>
                    </el-button>
                    <el-popconfirm width="200px" :title="store.appFront.deletePrompt"
                        :confirm-button-text="store.appFront.confirm" :cancel-button-text="store.appFront.cancel"
                        @confirm="toDelete(scope.row)">
                        <template #reference>
                            <el-button type="text" ref="deleteButton" style="color: #f56c6c" size="small">
                                <el-icon :size="15">
                                    <Delete />
                                </el-icon>
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>

        </el-table>
    </ManageCard>
    <DialogOfSaveInTableCard ref="dialogOfSaveInTableCard" :requestParam="requestParam" />
</template>

<script lang="ts" setup>
import DialogOfSaveInTableCard from './DialogOfSaveInTableCard.vue';
import { ref, defineExpose, onMounted } from 'vue';
import $kt from '@/vueKantboot';
import { useStore } from '@/stores/counter';
import ManageCard from '@/views/manage/components/ManageCard.vue';

let store = useStore();

let byteLength = (str: string) => {
    return str.replace(/[^x00-xFF]/g, '**').length;
}
let dialogOfSaveInTableCard = ref();
let manageCard = ref();
let requestParam2 = ref({
    createStart: null,
    createEnd: null,
});

let requestParam = ref(
    {
        "pageNumber": 1,
        "pageSize": 10,
        "sortType": "DESC",
        "sortField": "gmtCreate",
        "data": {
            "and": {
                "eq": [
                    {
                        id: null,
                        typeCode: null,
                    }
                ],
                "vague": [
                    {
                        name: null
                    }
                ],
                "like": [],
                "gt": [],
                "lt": [],
                "ge": [
                    {
                        gmtCreate: null
                    }
                ],
                "le": [
                    {
                        gmtCreate: null
                    }
                ]
            },
            "or": {
                "eq": [],
                "like": [],
                "gt": [],
                "lt": [],
                "ge": [],
                "le": []
            },
            "entity": {},
            "notNull": [],
            "isNull": []
        }
    }
);

let bodyData = ref({
    "number": 1,
    "size": 5,
    "totalPage": 0,
    "totalElements": 0,
    "gmtModified": "2023-04-10 17:02:26",
    "content": [{
    }],
});




let toDelete = (item: any) => {
    $kt.request.request({
        url: '/adminManage/system/user/delete',
        method: 'post',
        data: item,
    }).then((res: any) => {
        getBodyData();
    });
};

let getBodyData = () => {

    if (requestParam2.value.createStart != null && requestParam2.value.createStart != "") {
        requestParam.value.data.and.ge[0].gmtCreate = $kt.date.local2Gmt(requestParam2.value.createStart).getTime();
    } else {
        requestParam.value.data.and.ge[0].gmtCreate = null;
    }
    if (requestParam2.value.createEnd != null && requestParam2.value.createEnd != "") {
        requestParam.value.data.and.le[0].gmtCreate = $kt.date.local2Gmt(requestParam2.value.createEnd).getTime();
    } else {
        requestParam.value.data.and.le[0].gmtCreate = null;
    }


    $kt.request.request({
        url: '/adminManage/business/ovoShop/goods/getPage',
        method: 'post',
        data: requestParam.value,
    }).then((res: any) => {
        bodyData.value = res.data.data;
    });
};

let currentChange = (val: any) => {
    requestParam.value.pageNumber = val;
    getBodyData();
};
getBodyData();

let clickOfAddBtn = () => {
    dialogOfSaveInTableCard.value.open();
};


store.$onAction((json) => {
    if (json.name == "setLanguageCode") {
        getBodyData();
    }
});

let bodyFileListToImgList = (jsonStr: any) => {
    let imgList = [];
    var json=JSON.parse(jsonStr);
    
    

    for (let i = 0; i < json.length; i++) {
        if (json[i].fileType != "image") {
            continue;
        }

        imgList.push($kt.file.visit(json[i].fileId));
    }

    return imgList;
}


let goodsTypeList = ref([]);
let goodsTypeMap = ref({});

let getGoodsTypeList = () => {
    $kt.request.request({
        url: '/adminManage/business/ovoShop/goodsType/getList',
        method: 'post',
        data: {
           entity:{}
        }
    }).then((res: any) => {
        goodsTypeList.value = res.data.data;
        for (let i = 0; i < goodsTypeList.value.length; i++) {
            goodsTypeMap.value[goodsTypeList.value[i].code] = goodsTypeList.value[i].name;
        }
    });
};

getGoodsTypeList();

let typeCodeSelect = ref(null);

let toTypeCode = (typeCode: string) => {
    requestParam.value.data.and.eq[0].typeCode = typeCode;
    typeCodeSelect.value = typeCode;
    getBodyData();
};


defineExpose({
    toTypeCode
});
</script>


<style lang="scss" scoped>
.card {
    position: relative;
    height: 100%;
    box-shadow: none;
    border: 2px solid #ebeef5;
}

.title {
    color: #666666;
    text-align: center;
}

.cell-class {
    cursor: pointer;
}

.refresh:active {
    transform: rotate(45deg);
}

.no {
    color: #999999;
    text-align: center;
}

.item-title {
    text-align: center;
}
</style>